$(function () {
    var cv = document.getElementById("c");
    var ctx = cv.getContext("2d");
    var timerId;
    cv.width = 1240;   //绘画宽度
    cv.height = 750;   //绘画高度
    // cv.style.border = "1px solid #000";

    function Sprite(config) {
        this._init(config);
    }

    Sprite.prototype = {

        constructor: Sprite,
        //初始化数据
        _init: function (config) {
            this.ctx = config.ctx;
            this.imgSrc = config.imgSrc;  //图片路径
            this.x = config.x;  //给定动画的宽度
            this.y = config.y;  //给定动画的高度
            this.dirIndex = config.dirIndex || 1;  //初始方向
        },
        //在固定窗口绘画
        draw: function () {
            var spriteImg = new Image();
            spriteImg.src = this.imgSrc;
            var self = this,
                ctx = this.ctx;
            spriteImg.onload = function () {
                var targetX = 1240;   //距离屏幕left-最大距离出去
                var targetY = 750;    //距离屏幕top-最大距离出去
                var startX = 1240, startY = 100, stepx = 0, stepy = 0;
                var spriteX = 0, spriteY = 0,
                    spriteWidth = spriteImg.width / 4,
                    spriteHeight = spriteImg.height / 4,
                    index = 0;


              //出界后的初始
                timerId = setInterval(function () {
                    if (index >= 4) {
                        index = 0;
                    }
                    if (self.dirIndex === 2) {
                        stepx = 5;
                        stepy = 0
                    } else if (self.dirIndex === 1) {
                        stepx = -5;
                        stepy = 0
                    } else if (self.dirIndex === 0) {
                        stepy = 5;
                        stepx = 0
                    } else if (self.dirIndex === 3) {
                        stepy = -5;
                        stepx = 0
                    }

                    //判断是否出界
                    if (startX <= -spriteWidth * 2) {
                        startX = targetX + spriteWidth;
                    } else if (startX >= targetX + spriteWidth) {
                        startX = -spriteWidth * 2;
                    } else if (startY <= -spriteHeight * 2) {
                        startY = targetY + spriteHeight;
                    } else if (startY >= targetY + spriteHeight) {
                        startY = -spriteHeight * 2;
                    }

                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

                      //绘画
                    ctx.drawImage(spriteImg, index * spriteWidth, self.dirIndex * spriteHeight, spriteWidth, spriteHeight, startX += stepx, startY += stepy, spriteWidth * 3, spriteHeight * 3);
                    index++;

                    index %= 4;
                }, 150);
            };

        },
        changeDir: function (dir) {
            var dieKV = {
                left: 1,
                right: 2,
                up: 0,
                down: 3
            }
            this.dirIndex = dieKV[dir];
        }

    };



            // 创建对象
            var s = new Sprite({
                ctx: ctx,
                imgSrc: "../images/home/NPC-hunter_M-2.png",
                x: 200,
                y: 200
            });
           // s.draw();

            $("#btn1").on("click", function () {
                s.changeDir("up");
            })
            $("#btn2").on("click", function () {
                s.changeDir("down");
            })
            $("#btn3").on("click", function () {
                s.changeDir("left");
            })
            $("#btn4").on("click", function () {
                s.changeDir("right");
            })




    var timer1,
        flag = true;

    $("#clockjs-avatar").on("click", function () {
        console.log(1);
        if (flag) {
            flag = false;
            timer1 = setTimeout(function(){
                s.draw();
                $("#c").css({
                    display: "block"
                });
            }, 0);
        }
        $("#animateController").css({
            display:'block'
        })
    });

    $("#btn5").on("click", function () {
        flag = true;
        s =  new Sprite("");
        $("#c").css({
            display: "none"
        });
        $("#animateController").css({
            display:'none'
        })
    });

})